<template>
  <view>
    <view class="pb-50 oys">
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" v-for="(item, index) in resultList"
        :key="index">
        <view>
          <text class="fz-40 font-bold">{{ item.date }}</text>
        </view>
        <view class="flex align-center justify-around mt-26 pb-10">
          <view class="text-center">
            <view class="color-888888">巡检</view>
            <view class="mt-20">{{ item.inspectionCount || 0 }}</view>
          </view>
          <u-line color="#CCC" direction="col" length="50" />
          <view class="text-center">
            <view class="color-888888">保养</view>
            <view class="mt-20">{{ item.maintenanceCount || 0}}</view>
          </view>
          <u-line color="#CCC" direction="col" length="50" />
          <view class="text-center">
            <view class="color-888888">维修</view>
            <view class="mt-20">{{ item.repairCount || 0 }}</view>
          </view>
        </view>
      </view>
    </view>
    <EmptyIcon v-if="!loading && resultList.length === 0" />

  </view>
</template>

<script>
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import { getDetailSubList } from "@/api/statistics/device"

export default {
  name: "DetailData",
  components: { EmptyIcon },
  props: {
    queryParams: {
      type: Object,
      default: {}
    }
  },
  created () {
    this.init()
  },
  data () {
    return {
      pageNum: 1,
      loading: true,
      hasNext: true,
      resultList: []
    }
  },
  methods: {
    init () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum
      }
      getDetailSubList(params).then(res => {
        this.resultList = res.rows || []
        this.hasNext = res.hasNext || false
      }).finally(() => this.loading = false)
    },
    reachBottom () {
      if (!this.loading && this.hasNext) {
        this.getNextList()
      }
    },
    getNextList () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum + 1,
      }
      getDetailSubList(params).then(res => {
        this.pageNum++
        this.hasNext = res.hasNext
        this.resultList = [...this.resultList, ...res.rows]
      }).finally(() => this.loading = false)
    },
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
